<template>
    <div>
        <!-- mui 中  card.html 页面的案例 -->
        <!-- 商品轮播图区域 -->
       <div class="mui-card">
          <div class="mui-card-content">
              <div class="mui-card-content-inner">
                <swiper :imgList="lb"></swiper>
              </div>
          </div>
			</div>        

        <!-- 商品购买区域 -->
        <div class="mui-card">
          <div class="mui-card-header">页眉</div>
          <div class="mui-card-content">
            <div class="mui-card-content-inner">
              包含页眉页脚的卡片，页眉常用来显示面板标题，页脚用来显示额外信息或支持的操作（比如点赞、评论等）
            </div>
          </div>
			</div>


        <!-- 商品参数区域 -->
      <div class="mui-card">
				<div class="mui-card-header">页眉</div>
          <div class="mui-card-content">
            <div class="mui-card-content-inner">
              包含页眉页脚的卡片，页眉常用来显示面板标题，页脚用来显示额外信息或支持的操作（比如点赞、评论等）
            </div>
          </div>
				<div class="mui-card-footer">页脚</div>
			</div>

   
    </div>
</template>

<script>
import swiper from "../subComponents/swiper.vue"
import {Toast} from 'mint-ui'
export default {
    //接收组件传递的值
    data() {
        return {
            lb:[],  //用于保存后台获取的数据
            id: this.$route.params.id
        }
    },
    created() {
      this.getRotationPic()
    },
    methods: {
        getRotationPic(){
          this.$http.get("goods.json").then(result=>{
            if (result.body) {
              var obj = result.body.filter(item => {
                if (item.id == this.id) {
                  return item
                }
              })[0];
              this.lb = obj.pic
            } else {
              Toast("获取数据失败")
            }
          })
        }
    },
    components:{
        swiper    //在vue中注册组件
    }
}
</script>


<style lang="scss" scoped>
.goodsinfo-container {
  background-color: #eee;
  overflow: hidden;

  .now_price {
    color: red;
    font-size: 16px;
    font-weight: bold;
  }

  .mui-card-footer {
    display: block;
    button {
      margin: 15px 0;
    }
  }

  .ball {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background-color: red;
    position: absolute;
    z-index: 99;
    top: 390px;
    left: 146px;
  }
}
</style>
